<template>
	<view class="verification">
		<navbar :config="config" backColor="#000000"></navbar>
		<view class="imageView">
			<image :src="imgUrl+'/login/logo.png'" class="logoImage"></image>
		</view>


		<view v-if="tabCurrent == 0" style="height: calc(100vh - 400px);background-color: #ffffff;">
			<form @submit="formSubmit">
				<view class="content">
					<view class="contFrom">
						<view class="password">


							<view class="left" @click="goToverification">
								密码登录
							</view>
							<view class="right">
								验证码登录
							</view>


						</view>
						<view class="phone">
							<input type="number" v-model="phone" name="phone" value=""
								placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" @input="onPhone"
								maxlength="11" placeholder="请输入手机号" />
						</view>
						<view class="phone codeView">

							<input type="text" value="" v-model="code"
								placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" @input="onCode"
								name="code" maxlength="6" placeholder="请输入验证码" />
							<view class="obtain" :disabled="disabled" @click="judgeLogin" :class="isPhone?'active':''">
								{{verificationCode}}
							</view>
						</view>
						<view class="agreement">
							<view class="whole">
								<view class="top" v-if="flag" @click="onFlag">
									<icon type="success" color="#FF0000" size="17"></icon>
								</view>
								<view class="top" v-else style="width: 35rpx;height: 35rpx;border-radius: 50%;
									border: #ccc solid 1rpx;" @click="onFlag"></view>
							</view>
							<view class="agree">
								我已阅读并同意<text @click="goToagreement">《会员注册协议》</text>
							</view>

						</view>
						<!-- <view class="noAccount" @click="goToregister">没有账号？<text>立即注册</text></view> -->
					</view>
					<button class="login-button" 
					:disabled="!phone||!code||!flag"
					form-type="submit">
						登录
					</button>
					<button class="noAccount" form-type="submit" @click="goToregister">
						立即注册
					</button>

				</view>
			</form>
		</view>
		<register v-if="tabCurrent == 1"></register>
	</view>
</template>

<script>
	import register from '../register/register.vue'
	import {
		yzmLgoin,
		getVerfityCode
	} from "@/api/login.js"
	export default {
		components: {
			register
		},
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					title: '',
					backgroundColor: [1, "#fff"],
					back: true, //false是tolbar页面 是则不写
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
				},
				flag: false, //协议
				phone: '', //手机号
				isPhone: false, //手机号正则
				code: '', //密码
				time: 60, //倒计时
				disabled: false, //按钮
				verificationCode: "获取验证码",
				tabCurrent: 0,
				tabList: [{
						name: '登录'
					},
					{
						name: '注册'
					}
				]
			}
		},
		methods: {
			//忘记密码
			goToForgetPass() {
				uni.navigateTo({
					url: "../setup/forgetPass"
				})
			},
			//去登录
			goToLogin() {
				uni.redirectTo({
					url: "./login"
				})
			},
			//去注册
			goToregister() {
				this.tabCurrent = 1;
				// uni.redirectTo({
				// 	url: "./register"
				// })
			},
			//去协议
			goToagreement() {
				console.log(666)
				uni.navigateTo({
					url: "./agreement"
				})
			},
			//倒计时
			countDown() {
				if (this.time <= 0) {
					this.disabled = false;
					this.verificationCode = "重新获取";
					this.isPhone = true;
					this.time = 60;
					clearInterval(this.clear)
				} else {
					--this.time;
					this.verificationCode = this.time + "s"+'秒后重发'
				}
			},
			//清楚计时器
			beforeDestroy() {
				clearInterval(this.clear)
			},

			judgeLogin() {
				if (this.isPhone) {
					this.$http.get("/account/verify-mobile/" + this.phone).then(res => {
						if (res && res.code == 200) {
							if (res.data == false) {
								this.$mUtil.toast("该手机号还未注册")
							} else if (res.data == true) {
								this.obtainCode()
							}
						}
					})
				}
			},
			//获取验证码
			async obtainCode() {
				if (this.isPhone) {
					await this.$http.post(getVerfityCode, this.phone)
						.then(res => {
							if (res && res.code == 200) {
								this.disabled = false;
								this.isPhone = false;
								this.verificationCode = this.time + "s";
								this.$mUtil.toast("发送成功")
								this.clear = setInterval(this.countDown, 1000);
							}
						})
				}
			},
			//手机号
			onPhone(e) {
				this.phone = e.detail.value
				if (this.phone.match(this.$mConfig.telRegex)) {
					if (this.verificationCode == '获取验证码' || this.verificationCode == '重新获取') {
						this.isPhone = true
					}
				} else {
					this.isPhone = false
				}

			},
			//验证码
			onCode(e) {
				this.code = e.detail.value
				// console.log(this.code)
			},
			goToverification() {
				uni.redirectTo({
					url: "./login"
				})


			},
			//协议
			onFlag() {
				this.flag = !this.flag
			},
			// 切换
			tabsChange(index) {
				this.tabCurrent = index;
			},
			formSubmit(e) {
				console.log(666)
				let target = e.detail.value;
				if (!target.phone) {
					this.$mUtil.toast('请输入手机号')
					return false
				}
				
				if (!(target.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				if (!target.code) {
					this.$mUtil.toast("请输入验证码")
					return false
				}
				if (this.flag == false) {
					this.$mUtil.toast("请先同意协议")
					return false
				}
				let param = {
					mobile: target.phone,
					captcha: target.code,
					cid: uni.getStorageSync('cid')
				}

				// #ifdef APP-PLUS
				param.type = '0'
				param.version = uni.getSystemInfoSync().appVersion
				// #endif
				// #ifdef H5
				param.type = '0'
				param.version = uni.getSystemInfoSync().appVersion
				// #endif
				// #ifdef MP-WEIXIN
				param.type = '1'
				// #endif

				this.$http.post(yzmLgoin, param)
					.then(res => {
						if (res.code == 200) {
							this.$mUtil.toast("登录成功")
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("shop", res.data.shop)
							this.$http.get("/account/app-account-info").then(res => {
								uni.setStorageSync("personal", res.data)
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.login {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}

	.topBg {
		width: 100%;
		height: 520rpx;
		// background: #FF721B;
		background-image: url('https://zhongyi-shop.oss-cn-beijing.aliyuncs.com/songhe/weixin/static/loginBg.png');
		background-size: 100% 100%;
		background-position: top;
		background-repeat: no-repeat;
		position: relative;

		.loginTab {
			width: 100%;
			position: absolute;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0) !important;

			/deep/ .u-scroll-box {
				width: 100%;
				position: relative;
				display: flex;
				justify-content: space-around;
			}

			/deep/ .u-tab-bar {
				display: none;
			}

			/deep/ .u-tab-item {
				font-size: 18px !important;
				color: #ffffff !important;
				font-weight: 400 !important;
			}
		}
	}


	.contFrom {}

	.go-to-register {
		padding: 18rpx 0;
		color: #FF721B;
		font-size: 32rpx;
		font-weight: Regular;
		width: 100%;
		text-align: center;
		margin-top: 24rpx;
		border: 1rpx solid #FF721B;
		border-radius: 20rpx;
	}

	.login-button {
		width: 635rpx;
		height: 96rpx;
		background: #FF211F;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 335rpx;
	}

	.agreement {
		margin-top: 42rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;

		.whole {
			display: flex;
			align-items: center;
			width: 35rpx;
			height: 35rpx;
		}

		/deep/ .uni-icon-success {
			color: #FF211F !important;
		}
	}

	.agree {
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
		line-height: 27rpx;
		margin-left: 8rpx;
		text-align: center;

		text {
			color: #FF211F;
		}
	}

	.top {
		display: flex;
		align-items: center;
	}

	.choice {
		margin: 0 50rpx;
		display: flex;
		align-items: center;

		.whole {
			display: flex;
			align-items: center;
		}
	}



	.passpwd {
		display: flex;
		align-items: center;
		margin-top: 22rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #E6E6E6;

		.number {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		input {
			flex: 1;
			margin-left: 40rpx;
		}



		.active {
			background-color: #FF721B;
			color: #FFFFFF;
			border: none;
		}
	}

	.obtain {
		width: auto;
		height: 65rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #FF211F;
		font-weight: 400;
		font-size: 23rpx;
		color: #FF211F;
		line-height: 23rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 19rpx;
	}

	.phone {

		width: 635rpx;
		height: 96rpx;
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding-left: 38rpx;
		box-sizing: border-box;

		input {
			// width: 635rpx;
			// height: 96rpx;
		}
	}


	.password {
		display: flex;
		width: 296rpx;
		height: 31rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;

		.left {
			font-weight: 400;
			font-size: 27rpx;
			color: #999999;
			line-height: 27rpx;
		}

		.right {
			font-weight: 600;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;

		}
	}

	.content {
		margin: 0 57rpx;
	}

	.verification {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}

	.imageView {
		width: 100%;
		height: 160rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 38rpx;
		margin-bottom: 115rpx;
	}

	.logoImage {
		width: 160rpx;
		height: 160rpx;
		margin: 0 auto;
	}

	.codeView {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 15rpx;
	}

	.noAccount {
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
		margin-top: 42rpx;
		text-align: center;

		text {
			color: #FF211F;
		}
	}
	.noAccount {
		width: 635rpx;
		height: 96rpx;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		border: 2rpx solid #FF211F;
		margin-top: 38rpx;
		font-weight: 400;
		font-size: 29rpx;
		color: #FF211F;
		line-height: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>